import { ReactElement } from 'react'
import { Form, DatePicker } from 'antd'
import style from './index.module.less'

const { List, Item } = Form

function Main (name: string, disabled: boolean): ReactElement {
  return (
    <List name={name}>
      {(fields, { add, remove }, { errors }) => (
        <>
          {
            fields.map((field, index) => {
              return (
                <div className={style.line} key={field.key}>
                  <Item noStyle {...field}>
                    <DatePicker className={style.input} allowClear disabled={disabled} />
                  </Item>
                  {
                    !disabled && (
                      index === fields.length - 1
                        ? (
                        <div className={style['btn-block']} onClick={() => add()}>
                          <button className={style.btn} type='button'>+</button>
                        </div>
                          )
                        : (
                        <div className={style['btn-block']} onClick={() => remove(field.name)}>
                          <button className={style.btn} type='button'>-</button>
                        </div>
                          )
                    )
                  }
                </div>
              )
            })
          }
        </>
      )}
    </List>
  )
}

export default Main
